<!--
 作者：ex_wangshuai
 日期：2016-11-02
 功能：首页-知己彼-首页
 参数：
 事件：
-->
<template>
  <div class="peer">
    <toolbar :view-title="viewTitle">
      <div
        class="leftButton"
        type="button"
        @click="this.$broadcast('goBack')"
        slot="left-button">
      </div>
      <div
        class="rightButton"
        type="button"
        slot='right-button'>
        <!--<span @click="showSlideMenu">列表</span>-->
      </div>
    </toolbar>
    <div class="content">
      <div @click="goBrand" class="part brand">
        <p class="fs40">品牌对比</p>
        <p>BRAND</p>
      </div>
      <div @click="goProduct" class="part product">
        <p class="fs40">产品对比</p>
        <p>PRODUCT</p>
      </div>
      <!-- <div @click="goStore" class="part store">
        <p class="fs40">敬请期待</p>
        <p>店铺对比</p>
      </div> -->
    </div>
    <confirm :show.sync="show" title="是否退出？" cancel-text="取消" confirm-text="确定" @on-confirm="onAction('确认')"></confirm>
    <!--<slide-menu  v-show="menuOpenState"></slide-menu>-->
  </div>
</template>

<script>
  import Toolbar from '../common/Toolbar.vue'
  import Confirm from 'vux/dist/components/Confirm'
//  import SlideMenu from './SlideMenu.vue'

  export default{
    data () {
      var data = {}
      data.show = false
      data.viewTitle = '知己彼'
      data.tabList = []
      data.activeStyle = 0
      data.contentList = []
      data.isEdit = false
      data.collectedAll = []
      data.brandLink = ''
      data.productLink = ''
      data.storeLink = ''
      data.menuOpenState = false
      return data
    },
    components: {
      Toolbar,
      Confirm
    },
    methods: {
      goBack: function () {
        this.show = true
        // window.history.back()
      },
      exitApp: function () {
        var isConfrimed = window.confirm('确认退出？')
        if (isConfrimed === false) {
          return
        }
        window.cordova.exec(function (success) {
        }, function (error) {
          window.alert('Error: ' + error)
        }, 'MideaCommon', 'exit', [])
      },
      onAction: function (value) {
        if (value === '确认') {
          window.cordova.exec(function (success) {
          }, function (error) {
            window.alert('Error: ' + error)
          }, 'MideaCommon', 'exit', [])
        } else {
        }
      },
      goBrand: function () {
        this.$route.router.go('/peer/' + this.brandLink + '?key=' + this.brandLink)
      },
      goProduct: function () {
        this.$route.router.go('/peer/' + this.productLink + '?key=' + this.productLink)
      },
      goStore: function () {
        this.$route.router.go('/peer/' + this.storeLink + '?key=' + this.storeLink)
      },
      showSlideMenu: function () {
        this.menuOpenState = !this.menuOpenState
      }
//      editList: function () {
//        this.isEdit = !this.isEdit
//      },
      // 点击tab触发
//      changeTab: function (order) {
//        var content = document.getElementsByClassName('container')
//        document.querySelector('.active-bg').style.top = (order * 50) + '%'
//        this.activeStyle = order
//        for (var i = 0; i < content.length; i++) {
//          if (i === order) {
//            content[i].style.display = 'block'
//          } else {
//            content[i].style.display = 'none'
//          }
//        }
//      },
//      // 点击跳转路由
//      imgChecked: function (event) {
//        var boxChecked = event.target.parentNode
//        var clickKey = boxChecked.getAttribute('data-key')
//        // 编辑状态时
//        if (this.isEdit) {
//          if (boxChecked.className.match('checked')) {
//            boxChecked.classList.remove('checked')
//            boxChecked.classList.add('imgNoC')
//          } else {
//            boxChecked.classList.add('checked')
//            boxChecked.classList.remove('imgNoC')
//          }
//        } else {
//          this.$route.router.go('/peer/' + clickKey)
//        }
//      }
    },
    created () {
      this.$http.post(window.interface.peerNav, {}).then(function (res) {
        var resData = res.json().data
        var mkeyAll = []
        var tabList = []
        var contentList = []
        for (var i = 0; i < resData.length; i++) {
          // 导航列表数据
          tabList.push({'order': resData[i].order - 1, 'name': resData[i].name})
          contentList.push(resData[i].childs)
          // 得到所有的mkey
          for (var j = 0; j < resData[i].childs.length; j++) {
            for (var k = 0; k < resData[i].childs[j].childs.length; k++) {
              mkeyAll.push(resData[i].childs[j].childs[k].mkey)
            }
          }
        }
        // 列表数据存入localstorage
        window.sessionStorage.setItem('peerTabList', JSON.stringify(tabList))
        window.sessionStorage.setItem('peerContentList', JSON.stringify(contentList))
        // mkey数组存入localStorage，用于页面翻页
        window.sessionStorage.setItem('peerMkeyAll', JSON.stringify(mkeyAll))
        // 默认跳转第一个
//        var firstMkey = mkeyAll[0]
//        this.$route.router.go('/peer/' + firstMkey + '?key=' + firstMkey)
        this.brandLink = resData[0].childs[0].mkey
        this.productLink = resData[1].childs[0].mkey
//        this.storeLink = resData[2].childs[0].childs[0].mkey || ''
      })
    },
    ready: function () {
      this.$dispatch('changeLoadingStatus', false)
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    margin-top: 9vh;
    margin-bottom: 7vh;
  }

  .part{
    margin: .3rem auto 0;
    padding: .8rem .3rem;
    text-align: right;
    width: 80%;
    color: #FFF;
  }

  .brand{
    background: url("../../../static/img/peer/index/brand@3x.png") no-repeat center / 100% 100%;
  }

  .product{
    background: url("../../../static/img/peer/index/product@3x.png") no-repeat center / 100% 100%;
  }

  .store{
    background: url("../../../static/img/peer/index/store@3x.png") no-repeat center / 100% 100%;
  }


</style>
